<template>
	<!-- title部分 -->
	<view class="titlebox">
		<image class="titlebox-backimg" src="../../static/上一步.png" @click="gotoIndex"></image>
		<view class="titlebox-titletext">整点秒杀</view>
	</view>

	<!-- tabbar -->
	<view style="background: rgb(241, 224, 84);">
		<view class="tabbar">
			<!-- 滚动可视区域 -->
			<scroll-view class="scroll" scroll-x>
				<!-- scroll-x 是放在组件中的不在css里面  作用是横向滑动 -->
				<view class="group">
					<view class="item">
						<view class="textitem1">00:00</view>
						<view class="textitem2">抢购中</view>
					</view>
					<view class="item">
						<view class="textitem1">00:00</view>
						<view class="textitem2">抢购中</view>
					</view>
					<view class="item">
						<view class="textitem1">00:00</view>
						<view class="textitem2">抢购中</view>
					</view>
					<view class="item">
						<view class="textitem1">00:00</view>
						<view class="textitem2">抢购中</view>
					</view>
					<view class="item">
						<view class="textitem1">00:00</view>
						<view class="textitem2">抢购中</view>
					</view>
					<view class="item">
						<view class="textitem1">00:00</view>
						<view class="textitem2">抢购中</view>
					</view>
					<view class="item">
						<view class="textitem1">00:00</view>
						<view class="textitem2">抢购中</view>
					</view>
					<view class="item">
						<view class="textitem1">00:00</view>
						<view class="textitem2">抢购中</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>


	<!-- 商品部分 -->
	<view class="shop">
		<view class="shopbox">
			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>

			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>


			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>


			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotoIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	.titlebox {
		padding: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
/* 		margin-bottom: 10px; */
		/* 添加这一行来水平居中 */
		background: rgb(241, 224, 84);
	}

	/* title部分样式 */
	.titlebox-backimg {
		width: 15px;
		height: 15px;
	}

	.titlebox-titletext {
		margin-left: auto;
		margin-right: auto;
		font-size: 15px;
		/* color: #333; */
		font-weight: 600;
	}

	/* tabbar部分 */
	.tabbar {
		width: 91%;
		padding: 2%;
		margin: 0 auto;
		background: white;
		border-radius: 10px;
	}

	.scroll {
		box-sizing: border-box;
		/* 将边框变为内边框不会溢出到外面去 */
	}

	.group {
		white-space: nowrap;
	}

	.item {
		margin-right: 25rpx;
		text-align: center;
		font-size: 30rpx;
		width: 60px;
		display: inline-block;
	}

	.textitem1 {}

	.textitem2 {
		padding: 2%;
		background: yellow;
		border-radius: 10px;
	}


	/* 商品部分 */
	.shop {
		padding: 2%;
		background-image: linear-gradient(to bottom, rgb(241, 224, 84), rgb(246, 246, 246) 15% 100%);
	}

	.shopbox {
		/* margin: 0 auto; */
		display: flex;
		flex-wrap: wrap;
		/* align-items: center; */
		gap: 2%;
	}

	.shopbox_shopcontent {
		width: 43%;
		background: white;
		padding: 3%;
		margin-bottom: 3%;
		border-radius: 10px;
	}

	.shopbox_shopcontent_img {
		width: 100%;
		height: 108px;
	}

	.shopbox_shopcontent_text {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.shopbox_shopcontent_neirongbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shopbox_shopcontent_neirongbox_leftbox {
		padding: 2%;
		width: 40%;
	}

	.shopbox_shopcontent_neirongbox_leftbox_text {
		font-size: 11px;
		text-align: center;
		color: white;
		padding: 5% 10%;
		border-radius: 10px;
		background: linear-gradient(190deg, rgb(247, 97, 76), rgb(248, 195, 79));
	}

	.shopbox_shopcontent_neirongbox_rightbox_text1 {
		color: red;
		font-size: 12px;
		text-align: center;
	}

	.shopbox_shopcontent_neirongbox_rightbox_text2 {
		font-size: 10px;
		color: rgb(187, 187, 187);
		text-align: center;
	}
</style>
